<template>
    <el-dialog
        :title="'搜索模块'"
        :close-on-click-modal="false"
        width="300px"
        v-dialogDrag
        :visible.sync="isShow"
        :before-close="closeDialog"
    >
        <div style="padding:0 20px;">
            <el-select v-model="selectId" filterable placeholder="请选择或输入模块名" style="width: 100%;" :loading="isLoading">
                <el-option
                    v-for="item in list"
                    :key="item.id"
                    :label="item.zh"
                    :value="item.id">
                </el-option>
            </el-select>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="ok">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
/**
 * 模块搜索
 * */
import ajax from '@/utils/ajax.js'

export default {
    name: "moduleNameSearch",
    props:{
        libId:{
            type:String
        }
    },
    data(){
        return {
            isShow:true,
            list:[],
            selectId:'',
            isLoading:true,
        }
    },
    created(){
        this.getList()
    },
    methods:{
        ok(){
            const currentItem = this.list.find(item => item.id === this.selectId)
            if(currentItem){
                this.$router.push({
                    path:'/langDetail',
                    query:{
                        libId: this.libId,
                        parentId: `0,${currentItem.id}`
                    }
                })
                this.closeDialog()
            }
        },
        getList(){
            this.isLoading = true
            ajax({
                url:'fields/getModuleListFromFields',
                data: {
                    lib_id: this.libId,
                }
            }).then(res => {
                this.isLoading = false
                if(res.result === 'true'){
                    this.list = res.list || []
                }
            })
        },
        //关闭前的回调，会暂停 Dialog 的关闭, 通过父级组件的v-if调用关闭
        closeDialog(done){
            this.$emit('close')
        }
    }
}
</script>

<style scoped lang="scss">

</style>
